<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-11-17 11:36:45
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-12-05 13:10:35
 * @FilePath: /hgpt-admin/src/pages/reservationSet/index.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="reservationSet_content">
    <el-table :data="dayMap" border style="width: 100%">
      <el-table-column prop="day" label="" align="center" width="180">
      </el-table-column>
      <el-table-column align="center" label="10:00-11:00">
        <template slot-scope="scope">
          {{ scope.row.periodMapArr[0].number }}
        </template>
      </el-table-column>
      <el-table-column prop="time2" align="center" label="11:00-12:00">
        <template slot-scope="scope">
          {{ scope.row.periodMapArr[1].number }}
        </template>
      </el-table-column>
      <el-table-column prop="time3" align="center" label="13:00-14:00">
        <template slot-scope="scope">
          {{ scope.row.periodMapArr[2].number }}
        </template>
      </el-table-column>
      <el-table-column prop="time4" align="center" label="14:00-15:00">
        <template slot-scope="scope">
          {{ scope.row.periodMapArr[3].number }}
        </template>
      </el-table-column>
      <el-table-column prop="time5" align="center" label="15:00-16:00">
        <template slot-scope="scope">
          {{ scope.row.periodMapArr[4].number }}
        </template>
      </el-table-column>
      <el-table-column prop="time6" align="center" label="16:00-17:00">
        <template slot-scope="scope">
          {{ scope.row.periodMapArr[5].number }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="text"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 设置弹窗 -->
    <el-dialog title="设置体检预约" :visible.sync="dialogFormVisible">
      <div class="reservationSetDiglog_content">
        <div
          class="contet_box"
          v-for="(item, index) in this.editDataMap"
          :key="index"
        >
          <div class="titleText">{{ item.period }}</div>
          <div class="set_content">
            <div
              class="set_box"
              v-for="(item2, index2) in item.typeNumberMapArr"
              :key="index2"
            >
              <div class="title">体检包{{ item2.index }}：</div>
              <el-select
                disabled
                class="type_select"
                v-model="item2.packageType"
                placeholder="请选择"
                style="width: 150px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-input
                class="number_input"
                style="width: 150px"
                v-model="item2.number"
                type="number"
                min="0"
                autocomplete="off"
              ></el-input>
              <div>人</div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog_footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmDia">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data () {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      dayMap: [],
      options: [
        {
          label: "银江全身报告",
          value: 1
        },
        {
          label: "银江展会体检包",
          value: 2
        },
        {
          label: "全身疾病筛查",
          value: 3
        }
      ],
      optionsObj: {
        1: "银江全身报告",
        2: "银江展会体检包",
        3: "全身疾病筛查",
      },
      editDataRes: {},
      editDataMap: [],
    }
  },
  components: {

  },
  mounted () {
    this.getData()
  },
  methods: {
    // 获取一周的数据
    getData () {
      this.$api.get('rest/reserve/getReservationConfig', {
      }).then(res => {
        this.dayMap = Object.values(res.result.dayMap) || []
        this.dayMap.forEach(item => {
          item.periodMapArr = Object.values(item.periodMap)
        })
      })
    },

    // 编辑弹窗
    handleEdit (index, row) {
      this.$api.get('rest/reserve/getReservationConfigDay', {
        weekDay: row.index
      }).then(res => {
        this.editDataRes = res.result
        this.editDataMap = Object.values(res.result.periodMap) || []
        this.editDataMap.forEach(item => {
          item.typeNumberMapArr = Object.values(item.typeNumberMap)
        })
      })
      this.dialogFormVisible = true
    },

    // 修改确认
    confirmDia () {
      let newData = JSON.parse(JSON.stringify(this.editDataMap))
      newData.forEach(item => {
        item.typeNumberMapArr.forEach(item2 => {
          item2.packageTypeNme = this.optionsObj[item2.packageType]
          item2.number = Number(item2.number)
        })
        item.typeNumberMap = Object.assign({}, item.typeNumberMapArr)
        delete item.typeNumberMapArr
      })
      this.editDataRes.periodMap = Object.assign({}, newData)
      console.log(this.editDataRes)
      this.$api.post2('rest/reserve/editReservationConfigDay', this.editDataRes).then(res => {
        if (res.statusCode == '200') {
          this.$message.success("修改成功")
        } else {
          this.$message.error(res.message || "修改失败")
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep(.el-form-item__content) {
  width: 200px;
  display: flex;
}
.reservationSet_content{
  padding: 20px;
}
.reservationSetDiglog_content {
  .contet_box {
    padding: 10px 0;
    .titleText {
      font-size: 18px;
      font-weight: 500;
    }
    .set_content {
      display: flex;
      flex-wrap: wrap;
      .set_box {
        height: 50px;
        display: flex;
        align-items: center;
        padding-right: 20px;
        .title {
          font-size: 17px;
          width: 80px;
        }
        .type_select {
          padding: 0 10px;
        }
        .number_input {
          padding-right: 10px;
        }
      }
    }
  }
  .dialog_footer {
    display: flex;
    justify-content: center;
  }
}
</style>>


